<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>收货地址</title>  <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon" />
 	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <!--<script type="text/javascript" src="https://static.9hive.cn/global/vendor/jquery/jquery-2.1.4.min.js"></script>-->
	<script src="https://static.9hive.cn/global/vendor/jquery/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/template/default/mobile/script/bootstrap.min.js"></script>
	<script src="/template/default/recouse/js/zepto.min.js" type="text/javascript"></script>
	<script src="https://static.9hive.cn/global/vendor/layer/layer.js"></script>

    <link type="text/css" rel="stylesheet" href="/template/default/mobile/style/style.css">
    <link rel="stylesheet" type="text/css" href="/template/default/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/template/default/css/index.css"/>
    <link type="text/css" rel="stylesheet" href="/template/default/mobile/style/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="/template/default/mobile/style/common.mobile.css">
<style>
	.btn-danger{
		border: none;
		background-image: -webkit-linear-gradient(left, #FF4D89, #FF0358);
	}
</style>
	<script language='javascript'>
		function tip(msg,autoClose){
		 var div = $("#poptip");
		 var content =$("#poptip_content");
		 if(div.length<=0){
			 div = $("<div id='poptip'></div>").appendTo(document.body);
			 content =$("<div id='poptip_content'>" + msg + "</div>").appendTo(document.body);
		 }
		 else{
			 content.html(msg);
			 content.show(); div.show();
		 }
		 if(autoClose) {
			setTimeout(function(){
				content.fadeOut(500);
				div.fadeOut(500);

			},1000);
			}
		}
		function tip_close(){
		$("#poptip").fadeOut(500);
		 $("#poptip_content").fadeOut(500);
		}
    </script>
</head>
<body>

<div class="main">
	<div class="header">
		<div class="h-left">
			<a class="sb-back" href="javascript:history.back(-1)" title="返回"><img src="/template/default/images/arrow_left_white.png"/></a>
		</div>
		<div class="h-mid">
			我的地址      </div>
	</div>
<!--<div class="header" >
	<a href="javascript:history.back();" class="bn pull-left">
	<i class="icon-angle-left"></i></a>
	<span class="title">我的地址</span>
</div>-->
<form class="form-horizontal" method="post" role="form">
<input type="hidden" name="goodstype" value="0" />
<div class="order-main">
    <div id="myaddress">
			<%if(isEmpty(returnUrl!)){%>
        		<%for(list in receiver){%>
					<div id='address_${list.id}' class="<%if (list.isDefault){%>shopcart-main1<%}else{%>shopcart-main<%}%> img-rounded address_item" style='margin:0;padding:10px;margin-bottom:10px;cursor:pointer' onclick='editAddress("${list.id}",<%if (list.isDefault){%>1<%}else{%>0<%}%>)'>
						<span>${list.address} <br/> ${list.name}, ${list.mobile}</span>
						<br/>
						<span>
							<%if(!list.isDefault){%><a href="javascript:;" onclick="saveDefaultAddress(event,'${list.id}')">设为默认</a><%}%>
							<%if(list.isDefault){%><span style="color:#ff0000">默认地址</span><%}%>
							<a class="remove_yi" href="javascript:;" onclick="removeAddress(event,'${list.id}')"><img  src="/template/default/images/iconfont-xsc.png" /></a>
						</span>
					</div>
        		<%}%>
			<%}else{%>
        		<%for(list in receiver){%>
					<div id='address_${list.id}' class="<%if (list.isDefault){%>shopcart-main1<%}else{%>shopcart-main<%}%> img-rounded address_item" style='margin:0;padding:10px;margin-bottom:10px;cursor:pointer' onclick=selectAddress("${returnUrl!}?receiverId=${list.id}&productId=${productId!}&totalQuantity=${totalQuantity!}")>
						<span>${list.address} <br/> ${list.name}, ${list.mobile}</span>
						<br/>
						<span>
							<%if(!list.isDefault){%><a href="javascript:;" onclick="saveDefaultAddress(event,'${list.id}')">设为默认</a><%}%>
							<%if(list.isDefault){%><span style="color:#ff0000">默认地址</span><%}%>
							<a class="remove_yi" href="javascript:;" onclick="removeAddress(event,'${list.id}')"><img  src="/template/default/images/iconfont-xsc.png" /></a>
						</span>
					</div>
        		<%}%>
			<%}%>

    </div>
	<div>
		<button type="button" class="btn btn-danger" onclick="addAddress()"><i class="icon-plus"></i> 添加修改地址</button>
	</div>
	<%if(isEmpty(receiver)){ %>
	<div class="add-address img-rounded" id="addAddressPanel">
	<%}else{%>
	<div class="add-address img-rounded" style="display:none;" id="addAddressPanel">
	<%}%>
		<div class="add-address-hd">请仔细填写收货地址：</div>
		<div class="add-address-main">
			<div class="form-group">
				<label  class="col-sm-3 control-label">收货人：</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" id="realname">
				</div>
			</div>
			<div class="form-group">
				<label  class="col-sm-3 control-label">手机：</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" id="mobile">
				</div>
			</div>
			<div class="form-group">
				<label  class="col-sm-3 control-label">联系电话：</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" id="phone" placeholder="选填">
				</div>
			</div>
			<div class="form-group">
				<label  class="col-sm-3 control-label">邮编：</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" id="zipCode">
				</div>
			</div>
			<div class="form-group">
				<tr>
					<label  class="col-sm-3 control-label">地区：</label>
					<div class="col-sm-9">
						<div class="controls">
							<select id="sel-provance" class="pull-left form-control" style="width:30%; margin-right:5%;">
								<option value="">请选择</option>
							</select>
							<select id="sel-city" class="pull-left form-control" style="width:30%; margin-right:5%;">
								<option value="">请选择</option>
							</select>
							<select id="sel-area" class="pull-left form-control" style="width:30%;">
								<option value="">请选择</option>
							</select>
						</div>
					</div>
				</tr>
			</div>
			<div class="form-group">
				<label  class="col-sm-3 control-label">详细地址：</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" id="address">
				</div>
			</div>
			<div class="form-group">
				<label  class="col-sm-3 control-label">是否默认：</label>
				<div class="col-sm-6">
					<select name="isDefault" id="isDefault">
						<option value="1" selected>是</option>
						<option value="0">否</option>
					</select>
				</div>
			</div>
			<input type="hidden" id="addressid" value="" />
			<div class="form-group">
				<div class="col-sm-12">
					<button type="button" class="btn btn-danger" onclick="saveAddress()">保存</button>
					<button type="button" class="btn" onclick="addAddress();$('#addAddressPanel').hide();$('#addressid').val('');">取消</button>
				</div>
			</div>
		</div>
	</div>
</div>
<%include("footer_sys.html"){}%>
</body>
<script>
    $(function () {
        //初始化省市区
        $.ajax({
            url: "/b/area/getAreaByParent",
            type: 'GET',
            dataType:'json',
            data:{
                "parent_id":""
            },
            success: function(data){
                if(data.state=='ok'){
                    $("#sel-provance").append(data.info);
                    //var firstProvinceId = $('#sel-provance').find("option:selected").next().val();
                }

            }
        });

        //省级改变
        $("#sel-provance").change(function () {
            var parent_id=this.value;
            //1.将区域清空
			$("#sel-area").html('<option value="">请选择</option>');
			//如果不选择区域,将城市清空
			if(!parent_id){
                $("#sel-city").html('<option value="">请选择</option>');
			}else{
                $.ajax({
                    url: "/b/area/getAreaByParent",
                    type: 'GET',
                    data:{
                        "parent_id":parent_id
                    },
                    success: function(data){
                        if(data.state=='ok'){
                            $("#sel-city").html(data.info);
                            parent_id=$("#sel-city").val();//取出当前选中城市id,根据当前选中的城市id,换取区域列表
                            $.ajax({
                                url: "/b/area/getAreaByParent",
                                type: 'GET',
                                data:{
                                    "parent_id":parent_id
                                },
                                success: function(data){
                                    if(data.state=='ok'){
                                        $("#sel-area").html(data.info);
                                    }
                                }
                            });
                        }else{
                            layer.msg(data.info);
						}
                    }
                });
			}
        });

        //城市改变
        $("#sel-city").change(function () {
            var parent_id=this.value;
            $.ajax({
                url: "/b/area/getAreaByParent",
                type: 'GET',
                data:{
                    "parent_id":parent_id
                },
                success: function(data){
                    if(data.state=='ok'){
                        $("#sel-area").html(data.info);
                    }
                }
            });
        });


    })
</script>
<script type="text/javascript">
    var from='${from}';
    var returnurl = '${returnurl}';
    function addAddress() {
        $('#addAddressPanel').show();
        $('#realname').val('');
        $('#mobile').val('');
        $('#address').val('');
        $('#addressid').val('');

    }
    function saveAddress() {
        var realname = $('#realname').val();
        var mobile = $('#mobile').val();
        var phone = $('#phone').val();
        var zipCode = $('#zipCode').val();
        var provinceId = $('#sel-provance').val();
        var cityId = $('#sel-city').val();
        var areaId = $('#sel-area').val();
        var province = $('#sel-provance').find("option:selected").text();
        var city = $('#sel-city').find("option:selected").text();
        var area = $('#sel-area').find("option:selected").text();
        var isDefault = $('#isDefault').val();
        var areaPath = province + " " + city + " " + area;

        var address = $('#address').val();
        if (!realname) {
            layer.msg('请输入姓名！');
            return;
        }
        if (!mobile) {
            layer.msg('请输入手机号码！');
            return;
        }
        if(!/^[1][0-9]{10}$/.test(mobile)){
            layer.msg('手机号码格式错误,请重新输入!');
            return;
        }
        if(phone.length>0){
            var regPhone=/^((\d{11})|((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})))$/;
            if(!regPhone.test(phone)){
                layer.msg("联系电话格式错误,请重新输入!");
                return ;
            }
        }
        if(!zipCode){
            layer.msg('请输入邮编！');
            return;
        }
        console.log(provinceId+","+cityId+","+areaId);
        console.log(province+","+city+","+area);

        if(!provinceId) {
            layer.msg("请选择省");
            return;
        }
        if(!cityId) {
            layer.msg("请选择市!");
            return;
        }
        /*if(!area) {
            layer.msg("请选择区!");
            return;
        }*/
        if (!address) {
            layer.msg('请输入详细地址！');
            return;
        }

        $.ajax({
            url: "/b/receiver/save",
            type: 'GET',
            data:{
                'receiver.name' : realname,
                'receiver.mobile' : mobile,
                'receiver.provinceId' : provinceId,
                'receiver.cityId' : cityId,
                'receiver.areaId' : areaId,
                'receiver.province' : province,
                'receiver.city' : city,
                'receiver.area' : area,
                'receiver.phone' : phone,
                'receiver.areaPath' : areaPath,
                'receiver.address' : address,
                'receiver.zipCode' : zipCode,
                'receiver.isDefault' : isDefault,
                'receiver.id' : $('#addressid').val(),
                'shopId':"${shopId!}"
            },
            success: function(data){
                if(data.state=='ok'){
                    layer.msg("操作成功!");
                    setTimeout(function () {
                        window.location.reload();
                    },600);

                }
            }
        });
    }
    function saveDefaultAddress(e,id) {
        tip("正在处理数据...");
        $.post('/b/receiver/setdefault', {
            'id': id,
        }, function (s) {
            tip_close();
            if(s.status){
                window.location.reload();
            }
        }, 'json');
        e.stopPropagation();
    }
    function removeAddress(e,id){
        $this = $(this);
        if (confirm('确认要删除此收货地址吗?')) {
            $.ajax({
                url: "/b/receiver/delete",
                type: 'GET',
                data:{
                    'id': id,
                    'shopId':"${shopId!}"
                },
                success: function(date){
                    if(date.state=='ok'){
                        layer.msg("删除成功");
                        $("#address_"+id).remove();
					}
                }
            });
        }
    }
    var isdef = 0;
    function editAddress(id) {
        $.ajax({
            url: "/b/receiver/get",
            type: 'GET',
            data:{
                'id': id,
                'shopId':"${shopId!}"
            },
            success: function(s){
				$('#realname').val(s.name);
				$('#mobile').val(s.mobile);
				$('#phone').val(s.phone);
				$('#zipCode').val(s.zipCode);
                $('#sel-provance').find("option:selected").html('<option value=\''+s.provinceId+'\'>'+s.province+'</option>');
                $('#sel-city').find("option:selected").html('<option value=\''+s.cityId+'\'>'+s.city+'</option>');
                $('#sel-area').find("option:selected").html('<option value=\''+s.areaId+'\'>'+s.area+'</option>');
				$('#isDefault').val(s.isDefault);
				$('#addAddressPanel').show();
				$('#address').val(s.address);
				$('#addressid').val(s.id);

            }
        });
    }

    function selectAddress(url) {
        window.location.href=""+url;

    }

</script>
</html>